<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>厦门旅游登录 - 海上花园城市</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
            background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem;
            position: relative;
            overflow: hidden;
        }

        /* 厦门特色背景装饰 */
        body::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: 
                radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
                radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.2) 0%, transparent 50%);
            z-index: -2;
        }

        /* 厦门文化元素背景 */
        body::after {
            content: '';
            position: absolute;
            top: 50%;
            right: 10%;
            width: 300px;
            height: 300px;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><circle cx="150" cy="150" r="120" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2"/><path d="M150 50 L200 100 L150 150 L100 100 Z" fill="rgba(255,255,255,0.05)"/><circle cx="150" cy="150" r="80" fill="none" stroke="rgba(255,255,255,0.08)" stroke-width="1"/><text x="150" y="160" text-anchor="middle" fill="rgba(255,255,255,0.1)" font-size="16" font-family="serif">鹭岛</text></svg>') no-repeat center;
            background-size: contain;
            transform: translateY(-50%) rotate(15deg);
            z-index: -1;
            animation: float 6s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(-50%) rotate(15deg); }
            50% { transform: translateY(-60%) rotate(25deg); }
        }

        .login-container {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border-radius: 18px;
            box-shadow: 0 18px 36px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 360px;
            padding: 0;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.3);
            position: relative;
            transform: scale(0.9);
        }

        .login-header {
            background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
            padding: 2rem 1.8rem;
            text-align: center;
            color: white;
            position: relative;
        }

        .login-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 200"><path d="M0,100 Q100,50 200,100 T400,100 L400,200 L0,200 Z" fill="rgba(255,255,255,0.1)"/></svg>') no-repeat bottom;
            background-size: cover;
        }

        .logo-icon {
            width: 54px;
            height: 54px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            margin: 0 auto 0.9rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            border: 2px solid rgba(255, 255, 255, 0.3);
            position: relative;
            z-index: 1;
        }

        .login-title {
            font-size: 1.6rem;
            font-weight: 700;
            margin-bottom: 0.45rem;
            position: relative;
            z-index: 1;
        }

        .login-subtitle {
            font-size: 0.9rem;
            opacity: 0.9;
            font-weight: 300;
            position: relative;
            z-index: 1;
        }

        .login-form {
            padding: 1.8rem;
        }

        .form-group {
            margin-bottom: 1.35rem;
        }

        .form-label {
            display: block;
            margin-bottom: 0.45rem;
            color: #666;
            font-weight: 500;
            font-size: 0.9rem;
        }

        .form-input {
            width: 100%;
            padding: 0.9rem 0.9rem 0.9rem 2.7rem;
            border: 2px solid #e1e5e9;
            border-radius: 11px;
            font-size: 0.9rem;
            transition: all 0.3s ease;
            background: #f8f9fa;
            position: relative;
        }

        .form-input:focus {
            outline: none;
            border-color: #ff9a9e;
            background: white;
            box-shadow: 0 0 0 3px rgba(255, 154, 158, 0.1);
        }

        .input-wrapper {
            position: relative;
        }

        .input-icon {
            position: absolute;
            left: 0.9rem;
            top: 50%;
            transform: translateY(-50%);
            color: #999;
            font-size: 1.1rem;
            z-index: 1;
        }

        .password-toggle {
            position: absolute;
            right: 0.9rem;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: #999;
            cursor: pointer;
            font-size: 1.1rem;
            padding: 0.18rem;
        }

        .form-options {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.35rem;
            font-size: 0.85rem;
        }

        .remember-me {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: #666;
        }

        .remember-me input[type="checkbox"] {
            width: 16px;
            height: 16px;
            accent-color: #ff9a9e;
        }

        .forgot-password {
            color: #ff9a9e;
            text-decoration: none;
            font-weight: 500;
        }

        .forgot-password:hover {
            text-decoration: underline;
        }

        .login-button {
            width: 100%;
            background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
            color: white;
            border: none;
            padding: 0.9rem;
            border-radius: 11px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-bottom: 1.35rem;
        }

        .login-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(255, 154, 158, 0.3);
        }

        .login-button:active {
            transform: translateY(0);
        }

        .divider {
            display: none;
        }

        .divider::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 1px;
            background: #e1e5e9;
            z-index: 1;
        }

        .divider span {
            background: white;
            padding: 0 1rem;
            position: relative;
            z-index: 2;
        }

        .social-login {
            display: none;
        }

        .social-btn {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.35rem;
            color: white;
            background-size: 60%;
            background-repeat: no-repeat;
            background-position: center;
        }

        .social-btn.qq {
            background: #12b7f5;
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12.017 2.5c-4.418 0-8.017 2.926-8.017 6.517 0 1.891.877 3.63 2.35 4.774-.316.954-.316 1.954 0 2.908C4.877 17.853 4 19.592 4 21.483c0 .276.224.5.5.5s.5-.224.5-.5c0-1.326.596-2.548 1.64-3.517.954.316 1.954.316 2.908 0 1.044.969 2.266 1.517 3.592 1.517s2.548-.548 3.592-1.517c.954.316 1.954.316 2.908 0 1.044.969 2.266 1.517 3.592 1.517.276 0 .5-.224.5-.5s-.224-.5-.5-.5c-1.891 0-3.63-.877-4.774-2.35.316-.954.316-1.954 0-2.908 1.473-1.144 2.35-2.883 2.35-4.774C20.034 5.426 16.435 2.5 12.017 2.5zm-3.5 7c-.828 0-1.5-.672-1.5-1.5s.672-1.5 1.5-1.5 1.5.672 1.5 1.5-.672 1.5-1.5 1.5zm7 0c-.828 0-1.5-.672-1.5-1.5s.672-1.5 1.5-1.5 1.5.672 1.5 1.5-.672 1.5-1.5 1.5z"/></svg>');
        }

        .social-btn.weibo {
            background: #e6162d;
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M9.31 8.17c-2.73-.13-4.4 1.05-4.48 2.96-.08 1.98 1.67 4.04 4.1 4.26 2.73.25 4.41-.87 4.48-2.84.08-2.06-1.6-4.25-4.1-4.38zm-.46 5.58c-.73.26-1.72-.06-2.2-.71-.49-.66-.27-1.48.46-1.83.72-.34 1.68.02 2.17.66.48.65.29 1.54-.43 1.88zm1.18-2.2c-.26.09-.6-.03-.76-.26-.16-.24-.1-.53.16-.65.25-.11.58.01.74.24.16.24.11.56-.14.67zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1.46 12.5c-.15 2.34-2.42 4.26-5.28 4.26-2.55 0-4.66-1.57-4.66-3.42 0-1.02.49-2.1 1.33-3.06 1.37-1.56 3.15-2.31 4.08-1.71.3.19.32.63.04.98-.26.33-.74.4-1.07.15-.85-.64-2.34.16-3.31 1.77-.47.78-.52 1.6-.12 2.12.65.85 2.23.85 3.93-.12 1.18-.67 1.97-1.68 1.97-2.54 0-.5-.2-.96-.54-1.31-.45-.46-.45-1.21 0-1.67.45-.46 1.18-.46 1.63 0 .68.68 1.07 1.62 1.07 2.6z"/></svg>');
        }

        .social-btn.wechat {
            background: #07c160;
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 4.882-1.932 7.621-.55-.302-2.676-2.476-4.81-5.36-5.851a6.822 6.822 0 0 0-3.005-.785zm11.26 5.551c-1.648 0-2.983 1.336-2.983 2.984s1.335 2.983 2.983 2.983 2.983-1.335 2.983-2.983-1.335-2.984-2.983-2.984zm-11.26.997c-.608 0-1.101-.493-1.101-1.101s.493-1.101 1.101-1.101 1.101.493 1.101 1.101-.493 1.101-1.101 1.101zm5.424 0c-.608 0-1.101-.493-1.101-1.101s.493-1.101 1.101-1.101 1.101.493 1.101 1.101-.493 1.101-1.101 1.101z"/></svg>');
        }

        .social-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
        }

        .register-link {
            text-align: center;
            color: #666;
            font-size: 0.85rem;
        }

        .register-link a {
            color: #ff9a9e;
            text-decoration: none;
            font-weight: 600;
        }

        .register-link a:hover {
            text-decoration: underline;
        }

        .footer {
            text-align: center;
            padding: 0.9rem;
            color: #999;
            font-size: 0.75rem;
            border-top: 1px solid #f0f0f0;
            background: #fafafa;
        }

        /* 厦门文化装饰元素 */
        .cultural-decoration {
            position: absolute;
            bottom: 18px;
            right: 18px;
            width: 90px;
            height: 90px;
            opacity: 0.1;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="none" stroke="currentColor" stroke-width="2"/><path d="M30 50 Q50 30 70 50 Q50 70 30 50" fill="currentColor"/><text x="50" y="55" text-anchor="middle" font-size="12" fill="currentColor">厦</text></svg>') no-repeat center;
            background-size: contain;
            color: #ff9a9e;
        }

        .verification-btn {
            position: absolute;
            right: 0.9rem;
            top: 50%;
            transform: translateY(-50%);
            background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
            color: white;
            border: none;
            padding: 0.4rem 0.8rem;
            border-radius: 6px;
            font-size: 0.8rem;
            cursor: pointer;
            transition: all 0.3s ease;
            white-space: nowrap;
        }

        .verification-btn:hover {
            transform: translateY(-50%) scale(1.05);
            box-shadow: 0 4px 10px rgba(255, 154, 158, 0.3);
        }

        .verification-btn:disabled {
            background: #ccc;
            cursor: not-allowed;
            transform: translateY(-50%);
        }

        .countdown {
            color: #999;
        }

        @media (max-width: 768px) {
            body {
                padding: 1rem;
            }
            
            .login-container {
                max-width: 320px;
                transform: scale(1);
            }
            
            body::after {
                display: none;
            }
        }

        /* 用户协议弹窗样式 */
        .agreement-modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(5px);
        }

        .agreement-content {
            background: white;
            margin: 5% auto;
            padding: 0;
            border-radius: 15px;
            width: 90%;
            max-width: 600px;
            max-height: 80vh;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
            animation: modalSlideIn 0.3s ease-out;
        }

        @keyframes modalSlideIn {
            from {
                opacity: 0;
                transform: translateY(-50px) scale(0.9);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .agreement-header {
            background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
            color: white;
            padding: 1.5rem;
            text-align: center;
            position: relative;
        }

        .agreement-header h2 {
            margin: 0;
            font-size: 1.3rem;
            font-weight: 600;
        }

        .close-btn {
            position: absolute;
            right: 1rem;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
            padding: 0.2rem;
            border-radius: 50%;
            transition: background 0.3s ease;
        }

        .close-btn:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        .agreement-body {
            padding: 1.5rem;
            max-height: 60vh;
            overflow-y: auto;
            line-height: 1.6;
            color: #333;
        }

        .agreement-body h3 {
            color: #ff9a9e;
            margin-top: 1.5rem;
            margin-bottom: 0.8rem;
            font-size: 1.1rem;
        }

        .agreement-body p {
            margin-bottom: 1rem;
            text-align: justify;
        }

        .agreement-body ul {
            margin-left: 1.2rem;
            margin-bottom: 1rem;
        }

        .agreement-body li {
            margin-bottom: 0.5rem;
        }

        .agreement-footer {
            padding: 1rem 1.5rem;
            border-top: 1px solid #eee;
            text-align: center;
        }

        .agree-btn {
            background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
            color: white;
            border: none;
            padding: 0.8rem 2rem;
            border-radius: 8px;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .agree-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(255, 154, 158, 0.3);
        }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="login-header">
            <div class="logo-icon">🏝️</div>
            <h1 class="login-title">厦门旅游分析系统</h1>
            <p class="login-subtitle">登录以访问您的数据分析仪表盘</p>
        </div>

        <form class="login-form" onsubmit="handleLogin(event)">
            <div class="form-group">
                <label class="form-label">用户名</label>
                <div class="input-wrapper">
                    <span class="input-icon">👤</span>
                    <input type="text" class="form-input" placeholder="请输入用户名" value="1" required>
                </div>
            </div>

            <div class="form-group">
                <label class="form-label">密码</label>
                <div class="input-wrapper">
                    <span class="input-icon">🔒</span>
                    <input type="password" class="form-input" id="password" placeholder="请输入密码" value="1" required>
                    <button type="button" class="password-toggle" onclick="togglePassword()">👁️</button>
                </div>
            </div>

            <div class="form-options">
                <label class="remember-me">
                    <input type="checkbox">
                    <span>记住我</span>
                </label>
                <a href="#" class="forgot-password" onclick="showForgotPassword()">忘记密码？</a>
            </div>

            <button type="submit" class="login-button">登录</button>
        </form>

        <div class="divider">
            <span>或使用以下方式登录</span>
        </div>

        <div class="social-login">
            <button class="social-btn qq" onclick="socialLogin('qq')" title="QQ登录"></button>
            <button class="social-btn weibo" onclick="socialLogin('weibo')" title="微博登录"></button>
            <button class="social-btn wechat" onclick="socialLogin('wechat')" title="微信登录"></button>
        </div>

        <div class="register-link">
            还没有账号？<a href="#" onclick="showRegister()">立即注册</a>
        </div>

        <div class="footer">
            © 2023 厦门旅游分析系统 | 数据驱动决策
        </div>

        <div class="cultural-decoration"></div>
    </div>

    <div class="register-container" style="display: none;">
        <div class="login-header">
            <div class="logo-icon">🏝️</div>
            <h1 class="login-title">注册厦门旅游账号</h1>
            <p class="login-subtitle">创建您的专属旅游账户</p>
        </div>

        <form class="login-form" onsubmit="handleRegister(event)">
            <div class="form-group">
                <label class="form-label">用户名</label>
                <div class="input-wrapper">
                    <span class="input-icon">👤</span>
                    <input type="text" id="reg-username" class="form-input" placeholder="请输入用户名" required>
                </div>
            </div>

            <div class="form-group">
                <label class="form-label">邮箱</label>
                <div class="input-wrapper">
                    <span class="input-icon">📧</span>
                    <input type="email" id="reg-email" class="form-input" placeholder="请输入邮箱地址" required>
                </div>
            </div>

            <div class="form-group">
                <label class="form-label">密码</label>
                <div class="input-wrapper">
                    <span class="input-icon">🔒</span>
                    <input type="password" id="reg-password" class="form-input" placeholder="请输入密码（至少6位）" required>
                </div>
            </div>

            <div class="form-group">
                <label class="form-label">确认密码</label>
                <div class="input-wrapper">
                    <span class="input-icon">🔒</span>
                    <input type="password" id="reg-confirm-password" class="form-input" placeholder="请再次输入密码" required>
                </div>
            </div>

            <div class="form-options">
                <label class="remember-me">
                    <input type="checkbox" required>
                    <span>我同意<a href="#" onclick="showAgreement()" style="color: #ff9a9e;">用户协议</a></span>
                </label>
            </div>

            <button type="submit" class="login-button register-button">注册</button>
        </form>

        <div class="register-link">
            已有账号？<a href="#" onclick="showLogin()">立即登录</a>
        </div>

        <div class="footer">
            © 2023 厦门旅游分析系统 | 数据驱动决策
        </div>

        <div class="cultural-decoration"></div>
    </div>

    <div class="forgot-password-container" style="display: none;">
        <div class="login-header">
            <div class="logo-icon">🔑</div>
            <h1 class="login-title">找回密码</h1>
            <p class="login-subtitle">输入您的邮箱地址，我们将发送重置链接</p>
        </div>

        <form class="login-form" onsubmit="handleForgotPassword(event)">
            <div class="form-group">
                <label class="form-label">邮箱地址</label>
                <div class="input-wrapper">
                    <span class="input-icon">📧</span>
                    <input type="email" id="forgot-email" class="form-input" placeholder="请输入注册时的邮箱地址" required>
                </div>
            </div>

            <div class="form-group">
                <label class="form-label">验证码</label>
                <div class="input-wrapper">
                    <span class="input-icon">🔢</span>
                    <input type="text" id="verification-code" class="form-input" placeholder="请输入验证码" required>
                    <button type="button" class="verification-btn" onclick="sendVerificationCode()">发送验证码</button>
                </div>
            </div>

            <div class="form-group">
                <label class="form-label">新密码</label>
                <div class="input-wrapper">
                    <span class="input-icon">🔒</span>
                    <input type="password" id="new-password" class="form-input" placeholder="请输入新密码（至少6位）" required>
                </div>
            </div>

            <div class="form-group">
                <label class="form-label">确认新密码</label>
                <div class="input-wrapper">
                    <span class="input-icon">🔒</span>
                    <input type="password" id="confirm-new-password" class="form-input" placeholder="请再次输入新密码" required>
                </div>
            </div>

            <button type="submit" class="login-button reset-button">重置密码</button>
        </form>

        <div class="register-link">
            想起密码了？<a href="#" onclick="showLogin()">返回登录</a>
        </div>

        <div class="footer">
            © 2023 厦门旅游分析系统 | 数据驱动决策
        </div>

        <div class="cultural-decoration"></div>
    </div>

    <!-- 用户协议弹窗 -->
    <div id="agreementModal" class="agreement-modal">
        <div class="agreement-content">
            <div class="agreement-header">
                <h2>📋 厦门旅游分析系统用户协议</h2>
                <button class="close-btn" onclick="closeAgreement()">&times;</button>
            </div>
            <div class="agreement-body">
                <p><strong>欢迎使用厦门旅游分析系统！</strong></p>
                <p>在使用本系统前，请您仔细阅读并充分理解本用户协议的各项条款。您的注册、登录、使用等行为将视为对本协议的接受，并同意接受本协议各项条款的约束。</p>

                <h3>1. 服务说明</h3>
                <p>厦门旅游分析系统是一个专注于厦门旅游数据分析和信息服务的平台，为用户提供：</p>
                <ul>
                    <li>厦门旅游景点信息查询和推荐</li>
                    <li>旅游路线规划和定制服务</li>
                    <li>旅游数据分析和可视化展示</li>
                    <li>AI智能旅游助手咨询服务</li>
                    <li>美食、住宿、交通等综合信息</li>
                </ul>

                <h3>2. 用户注册与账户</h3>
                <p>2.1 用户注册时应提供真实、准确、完整的个人信息。</p>
                <p>2.2 用户有义务及时更新注册信息，确保信息的真实性和有效性。</p>
                <p>2.3 用户应妥善保管账户密码，对账户下的所有活动承担责任。</p>
                <p>2.4 禁止用户注册和使用虚假身份信息，一经发现将立即封停账户。</p>

                <h3>3. 用户行为规范</h3>
                <p>用户在使用本系统时，应遵守以下规范：</p>
                <ul>
                    <li>遵守中华人民共和国相关法律法规</li>
                    <li>不得发布违法、有害、虚假、侵权的信息</li>
                    <li>不得恶意攻击系统或干扰系统正常运行</li>
                    <li>不得盗用他人账户或侵犯他人合法权益</li>
                    <li>文明使用系统，维护良好的网络环境</li>
                </ul>

                <h3>4. 隐私保护</h3>
                <p>4.1 我们重视用户隐私保护，严格按照《隐私政策》处理用户个人信息。</p>
                <p>4.2 未经用户同意，不会向第三方披露用户个人信息。</p>
                <p>4.3 采用先进的安全技术保护用户数据安全。</p>
                <p>4.4 用户有权查询、更正、删除个人信息。</p>

                <h3>5. 知识产权</h3>
                <p>5.1 本系统的所有内容，包括但不限于文字、图片、音频、视频、软件等，均受知识产权法保护。</p>
                <p>5.2 未经授权，用户不得复制、传播、修改本系统内容。</p>
                <p>5.3 用户上传的内容应确保拥有合法权利，不得侵犯他人知识产权。</p>

                <h3>6. 免责声明</h3>
                <p>6.1 本系统提供的信息仅供参考，实际情况可能因时间、政策等因素发生变化。</p>
                <p>6.2 用户因使用本系统信息而产生的任何损失，本系统不承担责任。</p>
                <p>6.3 因不可抗力、网络故障等原因导致的服务中断，本系统不承担责任。</p>

                <h3>7. 服务变更与终止</h3>
                <p>7.1 本系统有权根据业务需要修改或终止服务。</p>
                <p>7.2 如用户违反本协议，本系统有权暂停或终止用户账户。</p>
                <p>7.3 服务终止后，用户数据将按照相关法律法规处理。</p>

                <h3>8. 协议修改</h3>
                <p>本协议可能根据法律法规变化或业务需要进行修改，修改后的协议将在系统内公布。用户继续使用服务即视为接受修改后的协议。</p>

                <h3>9. 联系我们</h3>
                <p>如您对本协议有任何疑问，请通过以下方式联系我们：</p>
                <ul>
                    <li>邮箱：service@xiamen-tourism.com</li>
                    <li>电话：0592-1234567</li>
                    <li>地址：福建省厦门市思明区旅游大厦</li>
                </ul>

                <p style="text-align: center; margin-top: 2rem; color: #999; font-size: 0.9rem;">
                    <strong>本协议自发布之日起生效</strong><br>
                    最后更新时间：2023年12月
                </p>
            </div>
            <div class="agreement-footer">
                <button class="agree-btn" onclick="agreeAndClose()">我已阅读并同意</button>
            </div>
        </div>
    </div>

    <script>
        function togglePassword() {
            const passwordInput = document.getElementById('password');
            const toggleBtn = document.querySelector('.password-toggle');
            
            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                toggleBtn.textContent = '🙈';
            } else {
                passwordInput.type = 'password';
                toggleBtn.textContent = '👁️';
            }
        }

        // 存储注册用户的简单数据结构
        let registeredUsers = JSON.parse(localStorage.getItem('registeredUsers')) || [];

        function handleLogin(event) {
            event.preventDefault();
            
            // 获取输入的用户名和密码
            const username = document.querySelector('input[type="text"]').value;
            const password = document.querySelector('input[type="password"]').value;
            
            // 检查是否为默认管理员账号
            const isDefaultAdmin = username === '1' && password === '1';
            
            // 检查是否为注册用户
            const registeredUser = registeredUsers.find(user => 
                (user.username === username || user.email === username) && user.password === password
            );
            
            if (isDefaultAdmin || registeredUser) {
                // 添加登录动画
                const loginBtn = document.querySelector('.login-button');
                const originalText = loginBtn.textContent;
                
                loginBtn.textContent = '登录中...';
                loginBtn.disabled = true;
                
                // 存储当前登录用户信息
                const currentUser = isDefaultAdmin ? 
                    { username: '管理员', email: 'admin@xiamen.com', isAdmin: true } : 
                    { ...registeredUser, isAdmin: false };
                
                localStorage.setItem('currentUser', JSON.stringify(currentUser));
                
                // 模拟登录过程
                setTimeout(() => {
                    // 登录成功，跳转到探索页面
                    window.location.href = 'explore.html';
                }, 1500);
            } else {
                // 登录失败提示
                alert('用户名/邮箱或密码错误！\n\n提示：\n• 可使用注册的账号登录\n• 默认管理员账号：1，密码：1');
                
                // 重置按钮状态
                const loginBtn = document.querySelector('.login-button');
                loginBtn.textContent = '登录';
                loginBtn.disabled = false;
            }
        }

        function socialLogin(platform) {
            const platformNames = {
                'qq': 'QQ',
                'weibo': '微博',
                'wechat': '微信'
            };
            
            alert(`正在使用${platformNames[platform]}登录...`);
            
            // 模拟社交登录
            setTimeout(() => {
                window.location.href = 'explore.html';
            }, 1000);
        }

        function showRegister() {
            // 隐藏登录表单，显示注册表单
            document.querySelector('.login-container').style.display = 'none';
            document.querySelector('.register-container').style.display = 'block';
        }

        function showLogin() {
            // 隐藏注册表单，显示登录表单
            document.querySelector('.register-container').style.display = 'none';
            document.querySelector('.login-container').style.display = 'block';
        }

        function handleRegister(event) {
            event.preventDefault();
            
            const username = document.querySelector('#reg-username').value;
            const email = document.querySelector('#reg-email').value;
            const password = document.querySelector('#reg-password').value;
            const confirmPassword = document.querySelector('#reg-confirm-password').value;
            
            // 验证输入
            if (!username || !email || !password || !confirmPassword) {
                alert('请填写所有必填项！');
                return;
            }
            
            if (password !== confirmPassword) {
                alert('两次输入的密码不一致！');
                return;
            }
            
            if (password.length < 6) {
                alert('密码长度至少6位！');
                return;
            }
            
            // 检查用户名和邮箱是否已存在
            const existingUser = registeredUsers.find(user => 
                user.username === username || user.email === email
            );
            
            if (existingUser) {
                alert('用户名或邮箱已存在，请使用其他用户名或邮箱！');
                return;
            }
            
            // 模拟注册过程
            const registerBtn = document.querySelector('.register-button');
            const originalText = registerBtn.textContent;
            
            registerBtn.textContent = '注册中...';
            registerBtn.disabled = true;
            
            setTimeout(() => {
                // 添加新用户到注册列表
                const newUser = {
                    username: username,
                    email: email,
                    password: password,
                    registerTime: new Date().toISOString()
                };
                
                registeredUsers.push(newUser);
                localStorage.setItem('registeredUsers', JSON.stringify(registeredUsers));
                
                alert(`注册成功！\n\n账号信息：\n• 用户名：${username}\n• 邮箱：${email}\n\n请使用新账号登录。`);
                
                // 清空注册表单
                document.querySelector('#reg-username').value = '';
                document.querySelector('#reg-email').value = '';
                document.querySelector('#reg-password').value = '';
                document.querySelector('#reg-confirm-password').value = '';
                
                // 切换回登录页面
                showLogin();
                registerBtn.textContent = originalText;
                registerBtn.disabled = false;
            }, 1500);
        }

        // 页面加载动画
        document.addEventListener('DOMContentLoaded', function() {
            const container = document.querySelector('.login-container');
            container.style.opacity = '0';
            container.style.transform = 'translateY(30px)';
            
            setTimeout(() => {
                container.style.transition = 'all 0.6s ease';
                container.style.opacity = '1';
                container.style.transform = 'translateY(0)';
            }, 100);
        });

        // 输入框焦点效果
        document.querySelectorAll('.form-input').forEach(input => {
            input.addEventListener('focus', function() {
                this.parentElement.style.transform = 'scale(1.02)';
            });
            
            input.addEventListener('blur', function() {
                this.parentElement.style.transform = 'scale(1)';
            });
        });

        let verificationCountdown = 0;
        let countdownTimer = null;

        function showForgotPassword() {
            // 隐藏登录表单，显示忘记密码表单
            document.querySelector('.login-container').style.display = 'none';
            document.querySelector('.register-container').style.display = 'none';
            document.querySelector('.forgot-password-container').style.display = 'block';
        }

        function sendVerificationCode() {
            const email = document.querySelector('#forgot-email').value;
            if (!email) {
                alert('请先输入邮箱地址！');
                return;
            }

            const verificationBtn = document.querySelector('.verification-btn');
            
            // 模拟发送验证码
            alert(`验证码已发送到 ${email}\n请查收邮件（模拟验证码：123456）`);
            
            // 开始倒计时
            verificationCountdown = 60;
            verificationBtn.disabled = true;
            
            countdownTimer = setInterval(() => {
                verificationCountdown--;
                verificationBtn.innerHTML = `<span class="countdown">${verificationCountdown}s后重发</span>`;
                
                if (verificationCountdown <= 0) {
                    clearInterval(countdownTimer);
                    verificationBtn.disabled = false;
                    verificationBtn.innerHTML = '发送验证码';
                }
            }, 1000);
        }

        function handleForgotPassword(event) {
            event.preventDefault();
            
            const email = document.querySelector('#forgot-email').value;
            const verificationCode = document.querySelector('#verification-code').value;
            const newPassword = document.querySelector('#new-password').value;
            const confirmNewPassword = document.querySelector('#confirm-new-password').value;
            
            // 验证输入
            if (!email || !verificationCode || !newPassword || !confirmNewPassword) {
                alert('请填写所有必填项！');
                return;
            }
            
            // 验证码检查（模拟）
            if (verificationCode !== '123456') {
                alert('验证码错误！正确验证码：123456');
                return;
            }
            
            if (newPassword !== confirmNewPassword) {
                alert('两次输入的密码不一致！');
                return;
            }
            
            if (newPassword.length < 6) {
                alert('密码长度至少6位！');
                return;
            }
            
            // 检查邮箱是否存在
            const userIndex = registeredUsers.findIndex(user => user.email === email);
            if (userIndex === -1) {
                alert('该邮箱未注册，请先注册账号！');
                return;
            }
            
            // 模拟重置密码过程
            const resetBtn = document.querySelector('.reset-button');
            const originalText = resetBtn.textContent;
            
            resetBtn.textContent = '重置中...';
            resetBtn.disabled = true;
            
            setTimeout(() => {
                // 更新用户密码
                registeredUsers[userIndex].password = newPassword;
                localStorage.setItem('registeredUsers', JSON.stringify(registeredUsers));
                
                alert(`密码重置成功！\n\n账号：${registeredUsers[userIndex].username}\n邮箱：${email}\n\n请使用新密码登录。`);
                
                // 清空表单
                document.querySelector('#forgot-email').value = '';
                document.querySelector('#verification-code').value = '';
                document.querySelector('#new-password').value = '';
                document.querySelector('#confirm-new-password').value = '';
                
                // 重置验证码按钮
                if (countdownTimer) {
                    clearInterval(countdownTimer);
                    countdownTimer = null;
                }
                const verificationBtn = document.querySelector('.verification-btn');
                verificationBtn.disabled = false;
                verificationBtn.innerHTML = '发送验证码';
                verificationCountdown = 0;
                
                // 切换回登录页面
                showLogin();
                resetBtn.textContent = originalText;
                resetBtn.disabled = false;
            }, 1500);
        }

        // 用户协议相关函数
        function showAgreement() {
            document.getElementById('agreementModal').style.display = 'block';
            document.body.style.overflow = 'hidden'; // 防止背景滚动
        }

        function closeAgreement() {
            document.getElementById('agreementModal').style.display = 'none';
            document.body.style.overflow = 'auto'; // 恢复背景滚动
        }

        function agreeAndClose() {
            // 自动勾选同意复选框
        const checkbox = document.querySelector('.register-container input[type="checkbox"]');
            if (checkbox) {
                checkbox.checked = true;
            }
            closeAgreement();
        }

        // 点击弹窗外部关闭
        window.onclick = function(event) {
            const modal = document.getElementById('agreementModal');
            if (event.target === modal) {
                closeAgreement();
            }
        }
    
        // 用户协议相关函数
       
 function showAgreement() {
            document.getElementById('agreementModal').style.display = 'block';
            document.body.style.overflow = 'hidden'; // 防止背景滚动
        }

        function closeAgreement() {
            document.getElementById('agreementModal').style.display = 'none';
            document.body.style.overflow = 'auto'; // 恢复背景滚动
        }

        function agreeAndClose() {
            // 自动勾选同意复选框
            const checkbox = document.querySelector('.register-container input[type="checkbox"]');
            if (checkbox) {
                checkbox.checked = true;
            }
            closeAgreement();
        }

        // 点击弹窗外部关闭
        window.onclick = function(event) {
            const modal = document.getElementById('agreementModal');
            if (event.target === modal) {
                closeAgreement();
            }
        }
    </script>
</body>
</html>






